<template>
  <div class="Chuzu">
    <header>
      <van-icon name="arrow-left" @click="fanhuia" />
      <span>发布房源</span>
      <span></span>
    </header>
    <main>
      <ul>
        <li>房源信息</li>
        <li>
          <span>小区名称</span>
          <p>
            <span>请输入小区名称</span>
            <van-icon name="arrow" />
          </p>
        </li>
        <li>
          <span>租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</span>
          <van-field v-model="value" placeholder="请输入租金/月" />
          <span>￥/月</span>
        </li>
        <li>
          <span>建筑面积</span>
          <van-field v-model="value" placeholder="请输入建筑面积" />
          <span>m2</span>
        </li>
        <li>
          <span>户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</span>
          <van-field v-model="fieldValue" is-link @click="show = true" />
          <van-popup v-model="show" position="bottom">
            <van-picker show-toolbar :columns="columns" :default-index="2" />
          </van-popup>
        </li>
        <li>
          <span>所在楼层</span>
          <van-field v-model="fieldValue" is-link @click="sho = true" />
          <van-popup v-model="sho" position="bottom">
            <van-picker show-toolbar :column="column" :default-index="2" />
          </van-popup>
        </li>
        <li>
          <span>朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向</span>
          <van-field v-model="fieldValue" is-link @click="sho = true" />
          <van-popup v-model="sho" position="bottom">
            <van-picker show-toolbar :column="column" :default-index="2" />
          </van-popup>
        </li>
        <li>房屋标题</li>
        <li>
          <p>请输入标题(列如：整租 小区名 2室5000元)</p>
        </li>
      </ul>
      <div class="List_flex">
        <p>房屋图片</p>
        <van-uploader v-model="fileList">
          <template #preview-cover="{ file }">
            <div class="preview-cover van-ellipsis">{{ file.name }}</div>
          </template>
        </van-uploader>
      </div>
      <div class="list_quer">
        <p>房屋配置</p>
        <div class="list_toper">
          <dl id="colorid">
            <dt>
              <van-icon name="font-o" />
            </dt>
            <dd>衣柜</dd>
          </dl>
          <dl>
            <dt>
              <van-icon name="free-postage" />
            </dt>
            <dd>洗衣机</dd>
          </dl>
          <dl>
            <dt>
              <van-icon name="coupon-o" />
            </dt>
            <dd>空调</dd>
          </dl>
          <dl>
            <dt>
              <van-icon name="fire-o" />
            </dt>
            <dd>天然气</dd>
          </dl>
          <dl>
            <dt>
              <van-icon name="shop-collect-o" />
            </dt>
            <dd>冰箱</dd>
          </dl>
          <dl>
            <dt>
              <van-icon name="hotel-o" />
            </dt>
            <dd>暖气</dd>
          </dl>
          <dl>
            <dt>
              <van-icon name="desktop-o" />
            </dt>
            <dd>电视</dd>
          </dl>
          <dl>
            <dt>
              <van-icon name="cluster-o" />
            </dt>
            <dd>热水器</dd>
          </dl>
          <dl>
            <dt>
              <van-icon name="bulb-o" />
            </dt>
            <dd>宽带</dd>
          </dl>
          <dl>
            <dt>
              <van-icon name="points" />
            </dt>
            <dd>沙发</dd>
          </dl>
        </div>
      </div>
      <div class="burew">
        <p>房屋描述</p>
        <van-field
          v-model="message"
          rows="5"
          autosize
          type="textarea"
          maxlength="100"
          placeholder="请输入房屋描述信息"
          show-word-limit
        />
      </div>
    </main>
    <footer>
      <van-button type="default" @click="burew">取消</van-button>
      
      <van-button type="primary">提交</van-button>
    </footer>
  </div>
</template>

<script>
import axios from "axios";
import { Dialog } from "vant";
export default {
  data() {
    return {
      value: "",
      show: false,
      fieldValue: "",
      columns: [],
      column: [],
      sho: false,
      fileList: [],
      data: [],
      message:''
    };
  },
  created() {
    axios.get("http://47.102.145.189:8009/houses/params").then((res) => {
      this.columns = JSON.parse(JSON.stringify(res.data.body.roomType));
      console.log("columns...", res.data.body);
    });
    // axios.get("http://47.102.145.189:8009/houses/params").then(res=>{
    //   this.columns=JSON.parse(JSON.stringify(res.data.body.floor))
    //   console.log("columns...",res.data.body)
    // })
    axios
      .get("http://47.102.145.189:8009/houses/params/?supporting")
      .then((res) => {
        this.data = res.data.body.supporting;
        console.log("ress...", res.data.body.supporting);
      });
  },
  methods: {
    fanhuia() {
      this.$router.go("-1");
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    burew(){
      Dialog.confirm({
        title: "提示",
        message: "放弃发布房源？",
      })
        .then(() => {
          this.$router.push("/My");
        })
        .catch(() => {
          this.$router.go("0");
          // on cancel
        });
    }
  },
};
</script>

<style scoped lang="scss">
.Chuzu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ccc;
  background: #f2f6fc;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
main {
  flex: 1;
  overflow: scroll;
}
footer{
  width: 100%;
  height: 50px;
  background: #fff;
}
ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  li {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #ccc;

    p {
      display: flex;
      height: 100%;
      align-items: center;
    }
  }
}
.van-cell {
  flex: 1;
  height: 100%;
}
.van-cascader {
  height: 40%;
}
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
.List_flex {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  background: #fff;
  p {
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
}
.list_toper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ccc;
  dl {
    width: 20%;
    text-align: center;
    padding: 10px 0;
    dt {
      width: 100%;
      padding: 10px 0;
      i {
        font-size: 25px;
      }
    }
    dd {
      font-size: 15px;
    }
  }
}
.list_quer {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  margin-bottom: 20px;
  p {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
  }
}
.burew{
  width:100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  p{
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #ccc;
  }
}
.van-button{
  width: 50%;
}
</style>
